<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="en">

<head>
    <%@include file="/view/common/head.jsp" %>
    <link rel="stylesheet" href="static/css/register.css">
    <title> 注册页面</title>
</head>

<body>
<div class="content">
    <p class="welcome">
        欢迎注册
    </p>
    <div class="register_content">
        <div style="position: relative">
            <p>注册尚硅谷用户</p>
            <span style="position: absolute;right: 15px;top: 5px;color: red" id="msg">${requestScope.msg}</span>
            <form action="userServlet" method="POST">
                <input type="hidden" name="action" value="register" readonly>
                <div>
                    <label for="username">用户名称：</label>
                    <input type="text" id="username" name="username" placeholder="请输入用户名">
                </div>
                <div>
                    <label for="password">用户密码：</label>
                    <input type="password" id="password" name="password" placeholder="请输入密码">
                </div>
                <div>
                    <label for="sure_pw">确认密码：</label>
                    <input type="password" id="sure_pw" name="password" placeholder="请确认密码">
                </div>
                <div>
                    <label for="email">电子邮件：
                        <input type="text" id="email" name="email" placeholder="请输入电子邮箱">
                    </label>
                </div>
                <div style="position: relative">
                    <label for="code">&nbsp;验 证&nbsp;码：
                        <input type="text" id="code" name="code" placeholder="" style="width: 100px">
                    </label>
                    <img src="kaptcha.img" id="img_code" alt="验证码" style="width: 30%; height: 40px; position: absolute; right: 30px">
                </div>
                <button type="submit">注册</button>
                <a href="view/user/login.jsp" style="color: red">马上登录</a>
            </form>
        </div>
    </div>
</div>
<%@include file="/view/common/footer.jsp" %>

<script>
    $(function () {
        $("#img_code").click(function () {
            this.src = "${basePath}kaptcha.img?d=" + new Date();
        })

        $("#username").on("blur", function() {
            let username = this.value;

            $.getJSON("userServlet", "action=ajaxExitsUsername&username=" + username, function (data) {
                if(data.exits) {
                    $("#msg").text("用户名已存在")
                }else {
                    $("#msg").text("用户名可用")
                }
            })
        })

    })
</script>
</body>

</html>